<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
	<head>    
    <title>Curvas de B&eacute;zier</title>    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link href="../../styles.css" rel="stylesheet">
    <link rel="icon" href="../../images/icon.png">
	</head>
	<body>
    <div id="top">
      <h1>Curvas de B&eacute;zier</h1> 
    </div>
    <div id="main">
      <h2>Contenido</h2>
      <div class="contents">
        <ol>
          <li><a href="#intro">Introducci&oacute;n</a></li>
          <li><a href="#linear">Curva lineal o grado 1</a></li>
          <li><a href="#cuad">Curva cuadr&aacute;tica o grado 2</a></li>
          <li><a href="#cubic">Curva c&uacute;bica o grado 3</a></li>
          <li><a href="#higher-grade">Curvas de mayor grado</a></li>
          <li><a href="#cubic-hermite-spline">Spline cúbico de Hermite</a></li>
          <li><a href="#notes">Notas</a></li>
          <li><a href="#refs">Referencias</a></li>
        </ol>
      </div>
      <h2 id="intro">Introducci&oacute;n</h2>
      <div class="contents">
        <p>Todo esto que voy a mencionar es lo que he aprendido de este tema que tiene uso pr&aacute;ctico >:]</p>
        <br>
        <p>La interpolaci&oacute;n es un procedimiento que se hace para generar puntos que conecten a 2 (o m&aacute;s) puntos determinados con la intenci&oacute;n de tener algo &uacute;til que los conecte. Su contraparte, la extrapolaci&oacute;n, es el procedimiento para generar puntos fuera de un intervalo de puntos y puede usarse para crear curvas que predigan el comportamiento de unos puntos base.</p>
        <br>
        <img src="../../images/model3/interp-extrap.png" alt="Image could not be loaded.">
        <br>
        <p>Las curvas de B&eacute;zier son un tipo de curva que se puede usar para hacer interpolaci&oacute;n entre 2 puntos. La forma de la interpolaci&oacute;n final depende del n&uacute;mero de "puntos intermedios" que se usen. Estos puntos intermedios no son puntos por los cuales la curva va a pasar (puede que pase, <i>pero ese no es el punto</i>) sino puntos que rigen la forma que &eacute;sta va a tener en el espacio.</p>
        <br>
        <p>Dependiendo del n&uacute;mero de puntos intermedios se tiene el grado de la curva de B&eacute;zier:</p>
        <ul>
          <li>0 puntos intermedios --> Curva de B&eacute;zier lineal o grado 1.</li>
          <li>1 punto intermedios --> Curva de B&eacute;zier cuadr&aacute;tica o grado 2.</li>
          <li>2 puntos intermedios --> Curva de B&eacute;zier c&uacute;bica o grado 3.</li>
          <li>...</li>
          <li>n puntos intermedios --> Curva de B&eacute;zier grado n+1</li>
        </ul>
        <br>
        <p>Al usar los 2 puntos extremos y los puntos intermedios definidos, lo que se busca es <i>parametrizar</i> cada coordenada en la que esten espec&iacute;ficados los puntos en funci&oacute;n de una variable. En este escrito se va a usar la letra <code>t</code> como esa variable.</p>
        <br>
        <p>Parametrizar consiste en especificar el comportamiento de una variable en funci&oacute;n de otra. Esto agrega otros sistemas en el que cada variable se puede graficar en funci&oacute;n de la variable de parametrizaci&oacute;n escogida.</p>
        <br>
        <img src="../../images/model3/param.png" alt="Image could not be loaded.">
        <p class="idtext">Ejemplo de una parametrizaci&oacute;n de 2 coordenadas. Con las parametrizaciones pueden generarse curvas poco usuales.</p>
        <br>
      </div>
      <h2 id="linear">Curva lineal o grado 1</h2>
      <div class="contents">
        <p>La interpolaci&oacute;n que se hace entre 2 puntos sin puntos intermedios es la m&aacute;s b&aacute;sica: una recta que conecte a los puntos directamente.</p>
        <br>
        <img src="../../images/model3/linear.png" alt="Image could not be loaded.">
        <br>
        <ul>
          <li>El punto <code>P</code> es un punto gen&eacute;rico entre <code>P1</code> y <code>P2</code>.</li>
          <li>La variable de parametrizaci&oacute;n <code>t</code> puede estar entre <code>t0</code> y <code>tf</code>.</li>
          <li>El punto <code>P1</code> corresponde a <code>t0</code> y el punto <code>P2</code> corresponde a <code>tf</code>.</li>
          <li>Los puntos pueden estar especificados de 1 dimensi&oacute;n en adelante. Es decir, pueden ser un valor num&eacute;rico o algo que est&eacute; en m&aacute;s dimensiones.</li>
        </ul>
        <br>
        <p>El efecto de la curva de B&eacute;zier se ve mejor al interpolar puntos de 2 dimensiones por lo que los ejemplos de Desmos compartidos ser&aacute;n de esa forma. <a href="https://www.desmos.com/calculator/xwhtmzmv9v">Desmos</a>.</p>
        <br>
        <img src="https://upload.wikimedia.org/wikipedia/commons/0/00/B%C3%A9zier_1_big.gif" alt="Image could not be loaded.">
        <p class="idtext">Imagen equivalente de <a href="#refs">Wikipedia</a>.</p>
        <br>
        <p>Esta curva es la principal y a partir de ella se generan las dem&aacute;s.</p>
      </div>
      <h2 id="cuad">Curva cuadr&aacute;tica o grado 2</h2>
      <div class="contents">
        <p>La curva cuadr&aacute;tica se obtiene de la siguiente forma:</p>
        <ul>
          <li>Obtener las interpolaciones lineales entre los puntos <code>P1</code> y <code>P2</code>, y <code>P2</code> y <code>P3</code>.</li>
          <li>Obtener la interpolaci&oacute;n entre un punto <code>P12</code>, que se encuentra en la interpolaci&oacute;n lineal que se hizo entre <code>P1</code> y <code>P2</code>, y un punto <code>P23</code>, que se encuentra en la interpolaci&oacute;n lineal que se hizo entre <code>P2</code> y <code>P3</code>.</li>
        </ul>
        <br>
        <p>Mejor hecho que dicho:</p>
        <br>
        <img src="../../images/model3/cuadratic.png" alt="Image could not be loaded.">
        <br>
        <p>La expresi&oacute;n obtenida en la imagen corresponde a la de un polinomio de segundo grado (cuadrado), por eso el nombre de la curva es B&eacute;zier cuadr&aacute;tico. En la imagen se puede ver  la curva generada (en negro) y como se genera al recorrer todas las interpolaciones lineales de principio a fin en "el mismo tiempo". <a href="https://www.desmos.com/calculator/8fuzah4rwj">Desmos</a>.</p>
        <br>
        <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/B%C3%A9zier_2_big.gif" alt="Image could not be loaded.">
        <p class="idtext">Imagen equivalente de <a href="#refs">Wikipedia</a>.</p>
        <br>
      </div>
      <h2 id="cubic">Curva c&uacute;bica o grado 3</h2>
      <div class="contents">
        <p>La curva c&uacute;bica se obtiene de la siguiente forma:</p>
        <ul>
          <li>Obtener las interpolaciones lineales entre los puntos <code>P1</code> y <code>P2</code>, <code>P2</code> y <code>P3</code>,  y <code>P3</code> y <code>P4</code>.</li>
          <li>Obtener las interpolaciones lineales entre los puntos <code>P12</code> y <code>P23</code>, y <code>P23</code> y <code>P34</code> generados en la primera interpolaci&oacute;n.</li>
          <li>Obtener la interpolaci&oacute;n lineal entre los puntos <code>P123</code> y <code>P234</code> generados en la segunda interpolaci&oacute;n.</li>
        </ul>
        <br>
        <p>Aqu&iacute; vamos otra vez:</p>
        <br>
        <img src="../../images/model3/cubic.png" alt="Image could not be loaded.">
        <br>
        <p>Las expresiones se van haciendo m&aacute;s largas... <a href="https://www.desmos.com/calculator/f9kbiuln8v">Desmos</a>.</p>
        <br>
        <img src="https://upload.wikimedia.org/wikipedia/commons/d/db/B%C3%A9zier_3_big.gif" alt="Image could not be loaded.">
        <p class="idtext">Imagen equivalente de <a href="#refs">Wikipedia</a>.</p>
        <br>
      </div>
      <h2 id="higher-grade">Curvas de mayor grado</h2>
      <div class="contents">
        <p>Por lo mencionado arriba se puede m&aacute;s o menos predecir como construir las expresiones de grado <code>n</code>:</p>
        <ul>
          <li>Se hace interpolaci&oacute;n lineal entre los puntos <code>P_1</code> y <code>P_2</code>, <code>P_2</code> y <code>P_3</code> ..., <code>P_(n-1)</code> y <code>P_(n)</code>, y, <code>P_(n)</code> y <code>P_(n+1)</code> (<b>n</b> interpolaciones).</li>
          <li>Se hace interpolaci&oacute;n lineal entre los puntos <code>P_12</code> y <code>P_23</code>, <code>P_23</code> y <code>P_34</code>, ..., <code>P_(n-2)(n-1)</code> y <code>P_(n-1)(n)</code>, y, <code>P_(n-1)(n)</code> y <code>P_(n)(n+1)</code> generados en la primera interpolaci&oacute;n (<b>n-1</b> interpolaciones).</li>
          <li>Se hace interpolaci&oacute;n lineal entre los puntos <code>P_123</code> y <code>P_234</code>, <code>P_234</code> y <code>P_345</code>, ..., <code>P_(n-3)(n-2)(n-1)</code> y <code>P_(n-2)(n-1)(n)</code>, y, <code>P_(n-2)(n-1)(n)</code> y <code>P_(n-1)(n)(n+1)</code> generados en la segunda interpolaci&oacute;n (<b>n-2</b> interpolaciones).</li>
          <li>...</li>
          <li>Se hace interpolaci&oacute;n lineal entre los puntos <code>P_123...(n-2)(n-1)</code> y <code>P_234...(n-1)(n)</code>, y, <code>P_234...(n-1)(n)</code> y <code>P_345...(n)(n+1)</code> (<b>2</b> interpolaciones).</li>
          <li>Se hace interpolaci&oacute;n lineal entre los puntos <code>P_123...(n-1)(n)</code> y <code>P_234...(n)(n+1)</code> (<b>1</b> interpolaci&oacute;n).</li>
        </ul>
        <img src="https://upload.wikimedia.org/wikipedia/commons/a/a4/B%C3%A9zier_4_big.gif" alt="Image could not be loaded.">
        <img src="https://upload.wikimedia.org/wikipedia/commons/0/0b/BezierCurve.gif" alt="Image could not be loaded.">
        <p class="idtext">Im&aacute;genes de <a href="#refs">Wikipedia</a>.</p>
        <br>
        <p>Es un poco horrible pero pueden generarse las curvas de ese modo >:]</p>
      </div>
      <h2 id="cubic-hermite-spline">Spline cúbico de Hermite</h2>
      <div class="contents">
        <p>Este es un tipo de interpolador usado en la pr&aacute;ctica y se puede especificar como una curva de B&eacute;zier c&uacute;bica. Su expresi&oacute;n general viene dada por</p>
        <br>
        <img src="../../images/model3/chs.png" alt="Image could not be loaded.">
        <br>
        <p><i>Visto desde la perspectiva de una curva de B&eacute;zier:</i> En vez de especificar los valores de los 4 puntos necesarios para la interpolaci&oacute;n de la curva (ya que es c&uacute;bica), especifica los puntos inicial y final de la interpolaci&oacute;n (<code>P0</code> y <code>Pf</code>), la "pendiente" para ir del primer punto al segundo (<code>m0</code>) y la "pendiente" para ir del tercero al &uacute;ltimo (<code>mf</code>). Estas pendientes no son respecto a la variable de parametrizaci&oacute;n <code>t</code> pero con respecto a la variable <code>a</code>.</p>
        <br>
        <p>Menciono esta expresi&oacute;n en este escrito ya que es el interpolador usado en las animaciones de esqueleto de <i>Super Mario Galaxy</i>. Tambi&eacute;n, ya que tiene una peculiaridad, como se dijo, aqu&iacute; no se especifica la posici&oacute;n de los puntos intermedios pero se especifica la pendiente, sin embargo, eso no me dice nada sobre la posici&oacute;n de esos puntos en la coordenada de interpolaci&oacute;n y tampoco sobre el valor que tienen.</p>
        <br>
        <img src="../../images/model3/chs-question.png" alt="Image could not be loaded.">
        <br>
        <p>&iquest;C&oacute;mo se puede saber en donde estan estos puntos en el sistema <code>P vs t</code>? Bueno, se me ocurri&oacute; usar una expresi&oacute;n B&eacute;zier c&uacute;bica 2D y empezar a asumir ciertas cosas...</p>
        <br>
        <ul>
          <li>Se tiene un Spline cúbico de Hermite de 1D, <code>P1(t1) = (y1(t1))</code>, que va a graficarse en el sistema <code>y1 vs t1</code>. Esto ya que s&oacute;lo hay puntos en una dimensi&oacute;n y quiero ver como la coordenada <code>t1</code> se ajusta a los puntos <code>y1</code>.</li>
          <li>Se tiene una curva de B&eacute;zier c&uacute;bica 2D, <code>P2(t2) = (x2(t2), y2(t2))</code>, que se va a graficar en el sistema <code>y2 vs x2</code>.</li>
        </ul>
        <br>
        <img src="../../images/model3/chs-question1.png" alt="Image could not be loaded.">
        <br>
        <p>Como quiero ajustar la gr&aacute;fica de <code>y2 vs x2</code> a la que est&aacute; en <code>y1 vs t1</code> entonces <code>y2(t2) = y1(t1)</code> y <code>x2(t2) = t1</code>. Adem&aacute;s, como <code>y2(t2) = y1(t1)</code> entonces <code>t2 = t1</code> lo que implica que <code>x2(t2) = t2</code>. Por simplicidad en la notaci&oacute;n, <code>t2 = t1 = t</code>, <code>x2(t2) = t1 --> x(t) = t</code> y <code>y2(t2) = y1(t1) = y(t)</code>.</p>
        <br>
        <img src="../../images/model3/chs-question2.png" alt="Image could not be loaded.">
        <br>
        <p>En la expresi&oacute;n de <code>x(t) = t</code> los puntos intermedios <code>t&alpha;</code> y <code>t&beta;</code> se asumen fijos (se supone que esos puntos no se mueven al cambiar la variable de parametrizaci&oacute;n). Considerando esto, se pueden generar varias expresiones <code>x(t) = t</code> con valores de <code>t</code> distintos en donde <code>t&alpha;</code> y <code>t&beta;</code> son variables. Todas las intersecciones entre las distintas <code>x(t) = t</code> <i>deber&iacute;an</i> caer en un mismo punto entonces! Al hacer eso se reflejan los valores de <code>t&alpha;</code> y <code>t&beta;</code> que eran desconocidos (no quiero a&ntilde;adir la deducci&oacute;n general con s&oacute;lo 2 rectas ya que es muy larga y fastidiosa <i>as&iacute; que <a href="https://www.desmos.com/calculator/c0jr5ouk1t">soluci&oacute;n gr&aacute;fica a trav&eacute;s de Desmos</a></i> >:]).</p>
        <br>
        <iframe class="embed" src="https://www.desmos.com/calculator/c0jr5ouk1t?embed" width="500" height="500" style="border: 1px solid #ccc" frameborder=0></iframe>
        <br>
        <img src="../../images/model3/chs-question3.png" alt="Image could not be loaded.">
        <br>
        <p>Como puede verse en el gr&aacute;fico <code>t&alpha; = t0 + (1/3)(tf - t0)</code> y <code>t&beta; = t0 + (2/3)(tf - t0)</code>. Esto significa que <code>t&alpha;</code> se ubica a <code>1/3</code> de la distancia entre <code>t0</code> y <code>tf</code>, y <code>t&beta;</code> se ubica a <code>2/3</code> de la misma distancia. <code>t0</code>, <code>t&alpha;</code>, <code>t&beta;</code> y <code>tf</code> se encuentran igualmente espaciados entre s&iacute;!</p>
        <br>
        <p>Con esto ya se tienen todas las variables del Spline cúbico de Hermite desconocidas y c&oacute;mo convertirlas para su uso en una curva de B&eacute;zier c&uacute;bica. Estoy seguro que hay otras formas de verificar esto de una forma m&aacute;s sencilla pero yo me compliqu&eacute; movi&eacute;ndome por aqu&iacute;.</p>
        <br>
        <iframe class="embed" src="https://www.desmos.com/calculator/18vrtv1czv?embed" width="500" height="500" style="border: 1px solid #ccc" frameborder=0></iframe>
        <p class="idtext">Spline cúbico de Hermite interactivo en <a href="https://www.desmos.com/calculator/18vrtv1czv">Desmos</a></p>
        <br>
      </div>
      <h2 id="notes">Notas</h2>
      <div class="contents">
        <ul>
          <li>Si <code>t0 = 0</code> y <code>tf = 1</code> entonces <code>a = t</code>.</li>
          <li>Los splines y las curvas de B&eacute;zier son cosas distintas (eso es lo que le&iacute;) pero en general se refieren a ellos como lo mismo ya que ambos se usan para interpolar y de ambos se pueden conseguir las mismas expresiones polin&oacute;micas.</li>
          <li>Es interesante notar que el Spline cúbico de Hermite s&oacute;lo puede representar un rango de curvas de B&eacute;zier c&uacute;bicas 2D (las mismas pendientes pueden representar diferentes puntos en una curva de B&eacute;zier 2D). Esto es de esperarse ya que las posiciones de los puntos <code>t&alpha;</code> y <code>t&beta;</code> se asumen "ancladas", limitando grados de libertad.</li>
          <li>Respecto al Spline cúbico de Hermite: De cierta forma (y esto lo puedo decir despu&eacute;s de todo lo dicho anteriormente) es predecible que los puntos en la variable de parametrizaci&oacute;n se encuentren igualmente espaciados entre s&iacute; ya que la variable aumenta linealmente. En la pr&aacute;ctica esta expresi&oacute;n se usa como el tiempo en animaciones.</li>
          <li>Me parece que "SPLine" significa: Soft Polynomial Line >:]</li>
        </ul>
      </div>
      <h2 id="refs">Referencias</h2>
      <div class="contents">
        <ul>
          <li><a href="https://en.wikipedia.org/wiki/B%C3%A9zier_curve">B&eacute;zier curve</a></li>
          <li><a href="https://en.wikipedia.org/wiki/Cubic_Hermite_spline">Cubic Hermite Spline</a></li>
        </ul>
      </div>
    </div>
	</body>
</html>
